<template>
	<div class="city_content">
		<header>
			<div class="search_row">
				<img class="search_img fl" src="../assets/image/ico_seach@2x.png">
				<input class="search_text fl" type="text" placeholder="输入城市名或者拼音" v-model="citySearch" :value="citySearch">
			</div>
		</header>
		<!--占位-->
		<div class="placeholder"></div>
		<!--定位城市-->
		<div class="searchcity_title">定位城市</div>
		<div class="searchcity_city" @click="getCity(nowCity.name,nowCity.id)">{{nowCity.name}}</div>
		<!--最近访问-->
		<!-- <div class="searchcity_title">最近访问</div>
		<ul class="fix">
			<li class="searchcity_li fl">北京</li>
			<li class="searchcity_li fl">北京</li>
			<li class="searchcity_li fl">北京</li>
		</ul> -->
		<!--热门城市-->
		<!-- <div class="searchcity_title">热门城市</div>
		<ul class="fix">
			<li class="searchcity_li fl">北京</li>
			<li class="searchcity_li fl">北京</li>
			<li class="searchcity_li fl">北京</li>
		</ul> -->
		<div class="locationcity">
			<div id="showCityContent"></div>
			<div v-for="item in showCity" class="letter-item">
				<div class="locationcity_title" :id="item.letter">{{item.letter}}</div>
				<div class="locationcity_city" @click="getCity(i.name,i.id)" v-for="i in item.citylist">{{i.name}}</div>
			</div>
		</div>
		<aside class="letter-aside">
			<ul>
				<li v-for="item in showCity" @click="naver(item.letter)">{{item.letter}} </li>
			</ul>
		</aside>
		<div id="tip">{{tipString}}</div>
	</div>
</template>
<script>
import pinyin from 'pinyin'
var cityLists = []
var cityNames = []
var cityNamesFilter = []
var letter = []
var countPage = 0
var tipLetter = ''
var citySearch = ''
var showCity = []
var showCityList = []
var showCityTemp;
import '../assets/js/Region';
export default {
	data () {
		return {
			cityNames: cityNamesFilter,
			letter: letter,
			tipString: tipLetter,
			citySearch: citySearch,
			showCity: showCity,
			getcity: '',
			getCitylist: '',
			nowCity: '',
		}
	},
	mounted: function () {
		countPage++
		if (countPage < 2) {
			cityNamesFilter = city;
			this.cityFilter(this.citySearch)
		};
		this.$nextTick(function () {
			this.cityView()
		})
	},
	methods: {
		cityView:function(){
			let _this = this;
			var lat, lng;
			let geocoder = new qq.maps.Geocoder();
			citylocation = new qq.maps.CityService({
				complete : function(result){
					lat = result.detail.latLng.lat;
					lng = result.detail.latLng.lng;
					//对指定地址进行解析
					geocoder.getAddress(new qq.maps.LatLng(lat,lng));
				}
			});
			citylocation.searchLocalCity();
			geocoder.setComplete(function(result) {
				let ncity = result.detail.addressComponents.city;
				for(let i = 0, len = city.length; i < len; i++) {
					if(ncity.match(city[i].name)) {
						_this.nowCity = {};
						_this.nowCity.name = city[i].name;
						_this.nowCity.id = city[i].id;
					}
				}
				// console.log(new qq.maps.LatLng(lat,lng));
				// console.log(_this.nowCity);
			});
			geocoder.setError(function() {
				console.log("出错了！！！");
			});
		},
		buildLetter: function () {  // 构建字母项
			letter = []
			for (let i = 0; i < 26; i++) {
				let obj = {}
				obj.letter = String.fromCharCode((65 + i))
				obj.citylist = []
				letter.push(obj)
			}
		},
		getFirstLetter: function (str) { //  得到城市第一个字的首字母
			let nowCase = pinyin(str, {style: pinyin.STYLE_NORMAL})[0][0].charAt(0).toUpperCase();
			return nowCase
		},
		buildItem: function (cityNamesFilter) {  // 构建城市

		this.buildLetter()
			let _this = this
			for (let i = 0; i < cityNamesFilter.length; i++) {
				let _index = Number(_this.getFirstLetter(cityNamesFilter[i].name).charCodeAt() - 65)
				if (_index >= 0 && _index < 26) {
				letter[_index].citylist.push(cityNamesFilter[i])
			}
		}
		// 如果letter中citylist中没有值的话，过滤这一项
		showCity = showCityTemp = letter.filter(function (value) {
			let len = value.citylist.length
			return len > 0
			})
		},
		naver: function (id) { // 点击右边字母滚动
			this.tipString = id
			let obj = document.getElementById(id)
			let tip = document.getElementById('tip')
			tip.setAttribute('class', 'tipAppear')
			setTimeout(function () {
				tip.removeAttribute('class')
			}, 500)
			let oPos = obj.offsetTop
			return window.scrollTo(0, oPos - 44)
		},
		cityFilter: function (city) {  // 城市搜索筛选
			let showCityListTemp
			this.buildItem(cityNamesFilter)
			showCity = showCityTemp
			showCity = showCity.filter(function (value) {
			showCityList = value.citylist

			showCityListTemp = showCityList.filter(function (val) {
				return (val.name.indexOf(city) > -1)
			})

			value.citylist = showCityListTemp
				return value.citylist.length > 0
			})
			this.showCity = showCity
			if (showCity.length === 0) {
				let _showCityContent = document.getElementById('showCityContent')
				_showCityContent.innerText = '查询不到结果'
				_showCityContent.setAttribute('class', 'tipShow')
			} else {
				document.getElementById('showCityContent').innerText = ''
			}
		},
		getCity (getcity,getcityid) {
			this.$router.push({name: 'index'});
			localStorage.setItem("getcity", getcity);
			localStorage.setItem("getcityid", getcityid);
			// this.getcity = (window.localStorage.getItem('getcity') || '[]');
			// this.getcityid = (window.localStorage.getItem('getcityid') || '[]');
			// console.log(getcity);
			// let getCitylist = this.getcity+","+this.getcityid;
			// console.log(getCitylist);
		}
	},
	watch: {
		citySearch: function (newCitySearch) {
			this.cityFilter(newCitySearch)
		}
	}
}
</script>
<style lang="scss">
.city_content{
	header{ padding: 0.14rem 0.3rem; width: calc(100% - 0.6rem); height: 0.6rem; background: #fff; position: fixed; left: 0; top: 0; }
	.search_row{ width: 100%; height: 0.6rem; background: #f1f1f1; border-radius: 0.24rem; }
	.search_img{ padding: 0.18rem; width: 0.24rem; height: 0.24rem; }
	.search_text{ line-height: 0.6rem; font-size: 0.24rem; color: #333; background: #f1f1f1; }
	.placeholder{ height: 0.88rem; }
	.searchcity_title{ padding-left: 0.3rem; height: 0.7rem; line-height: 0.7rem; font-size: 0.24rem; color: #999; }
	.searchcity_city{ margin-left: 0.3rem; width: 2.1rem; height: 0.9rem; line-height: 0.9rem; text-align: center; font-size: 0.28rem; color: #151517; background: #fff; }
	.searchcity_li{ margin: 0 0 0.2rem 0.3rem; width: 2.1rem; height: 0.9rem; line-height: 0.9rem; text-align: center; font-size: 0.28rem; color: #151517; background: #fff; }
	.locationcity{ padding-top: 0.56rem; }
	.letter-item{
		.locationcity_title{ padding-left: 0.3rem; height: 0.8rem; line-height: 0.8rem; font-size: 0.24rem; color: #151517; }
		.locationcity_city{ margin-bottom: 1px; padding-left: 0.3rem; height: 0.8rem; line-height: 0.8rem; font-size: 0.24rem; color: #151517; background: #fff; }
	}
	.letter-aside {
		position: fixed; right: 0.1rem; top: 2.8rem;
		ul {
			li{ height: 0.3rem; line-height: 0.3rem; text-align: center; font-size: 0.2rem; color: #ff4c54; }
		}
	}
	#tip{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #333333; width: 100px; height: 100px; z-index: 10; text-align: center; line-height: 100px; font-size: 50px; opacity: 0; }
	.tipAppear{ animation: appearTip 1 linear 0.5s; }
	@keyframes appearTip{ 0% { opacity: 1; } 80% { opacity: 0.5; } 100% { opacity: 0; } }
	.search-city{
		text-align: center; padding: 5px 0;
		input{ line-height: 24px; border-radius: 5px; outline: none; }
	}
	.tipShow{ text-align: center; line-height: 60px; font-size: 16px; color: #bbbbbb; }
}
</style>
